<template>
	<!-- 总进球 -->
	<view>
		<view class="yc-data-checkbox">
			<view class="box">
				<view class="box" v-if="noshowgame(3,'jq')" style="flex-wrap: wrap;">
					<view class="check" v-for="item,index in styledata.jq.res" :key="index"
						style="height: 75rpx;flex: 25%;"
						:style="styledata.jq.style[index]==0?'':' background-color: red; color: #fff;'"
						@click="change('jq',index,3)">
						<view class="huadan">
							<text style="font-weight: 700;font-size:28rpx;">{{item}}</text><br>
							<text style="margin-left: 5px;font-size:28rpx;">
								{{props.fixSelectData.jq[index]}}
							</text>
						</view>
					</view>
				</view>
				<view v-else class="check" style="flex: 1;">
					<view style="color: #999999;">
						未开售
					</view>
				</view>
			</view>
		</view>
	</view>
</template>
<script>
	import date from "/common/getdatetime.js"
	import { 
		ref,
		onBeforeMount,
		defineEmits,
		defineProps,
		reactive,
		watch,
		getCurrentInstance
	} from "vue"

	export default {
		props: ['Refresh', 'fixSelectData'],
		emits: ['getSelectList'],
		data() {
			return {
				styledata: {},
				temporaryArr: '',
				deleteId: this.fixSelectData.id
			}
		},
		created() {
			this.init();
		},
		watch: {
			Refresh(newVal, oldVal) {
				this.init();
			}
		},
		methods: {
			init() {
				this.temporaryArr = '';
				var arr = {
					jq: {
						style: [0, 0, 0, 0, 0, 0, 0, 0],
						res: ['0', '1', '2', '3', '4', '5', '6', '7+'],
					}
				}
				this.styledata = arr;
			},
			change(game, index, gameId) {
				var array = {
					'awayTeamAbbName': this.fixSelectData.short_away,
					'homeTeamAbbName': this.fixSelectData.short_home,
					'matchId': this.fixSelectData.id,
					'leagueAbbName': this.fixSelectData.short_comp,
					'matchNumStr': this.fixSelectData.issue_num,
					'gameDeadline': date.getNowFormatDate(0, this.fixSelectData.match_time * 1000),
					'orderDeadline': '',
					'sort': this.fixSelectData.match_time,
					'data': [{
						'res': this.styledata[game].res[index],
						'rate': this.fixSelectData[game][index],
						'poolEs': Number(this.noshowdan(gameId)),
					}],
				}
				if (this.styledata[game].style[index] == 0) {
					this.styledata[game].style[index] = 1
					if (this.temporaryArr == '') {
						var ojb = {
							gameData: array,
							selectBoole: true,
						}
						this.temporaryArr = ojb;
					} else {
						this.temporaryArr.selectBoole = true;
						var newOjd = {
							'res': this.styledata[game].res[index],
							'rate': this.fixSelectData[game][index],
							'poolEs': Number(this.noshowdan(gameId)),
						}
						this.temporaryArr.gameData.data.push(newOjd);
					}
					this.$emit('getSelectList', this.temporaryArr);
				} else {
					this.styledata[game].style[index] = 0
					if (this.temporaryArr.gameData.data.length == 1) {
						array.data = [];
						var ojb = {
							gameData: array,
							selectBoole: false,
						}
						this.temporaryArr = ojb;
					} else {
						var Delindex = this.temporaryArr.gameData.data.findIndex(item => item.res == this.styledata[game].res[index]);
						this.temporaryArr.gameData.data.splice(Delindex, 1);
					}
					this.$emit('getSelectList', this.temporaryArr);
				}
			},
			noshowdan(id) {
				id = String(id);
				var res = this.fixSelectData.sell_status[id];
				if (res == '2' || id == 3) {
					return true;
				} else {
					return false;
				}
			},
			noshowgame(id, gameType) {
				var res = this.fixSelectData.sell_status[id];
				if (res == '1' || res == '2' || this.fixSelectData[gameType].length > 1 || this.fixSelectData[gameType]['goalLine']) {
					return true;
				} else {
					return true;
				}
			},
			openpopup() {
				this.$refs.hhggpopup.open('bottom');
			},
			closeupup() {
				this.$refs.hhggpopup.close('bottom');
			}
		}
	}
</script>

<style>
	.inner-box1 text {
		position: absolute;
		left: 25%;
		bottom: -2px;
		color: #fff;
		transform: translateX(-50%);
	}
	
	.inner-box1 {
	
		width: 50%;
		height: 50%;
		background-color: red;
		transform: rotate(-45deg);
		position: absolute;
		left: -15%;
		top: -15%;
	}
	
	.huadan {
		text-align: center;
		overflow: hidden;
		line-height:30rpx;
	}
	
	.check {
		flex:1;
		border-radius:10rpx;
		display: flex;
		justify-content: center;
		align-items: center;



		/* 边框 */
		border: 3rpx solid #edf0f3;
		-webkit-box-sizing: border-box;
		box-sizing: border-box;
	}

	.box {

		width: 100%;
		height: 100%;
		display: flex;
		flex-direction: row;
		text-align: center;


	}

	text {
		margin: 1px;
		font-size: 20rpx;

		text-align: center;
	}
	
	.button {
		height: 80rpx;
		width: 100%;
		color: #ff0000;
		font-size: 26rpx;
		text-align: center;
		display: flex;
		justify-content: center;
		align-items: center;
	
		/* 边框 */
		border: 3rpx solid #ff0000;
		-webkit-box-sizing: border-box;
		box-sizing: border-box;
	}
	
	.buttonbox {
		flex: 2;
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;

		/* 边框 */
		border: 1rpx solid #edf0f3;
		-webkit-box-sizing: border-box;
		box-sizing: border-box;
	}

	.buttonboxx {
		display: flex;
		width: 100%;
		height: 100%;
		justify-content: center;
		align-items: center;
		/* 边框 */
		/* border: 1rpx solid #edf0f3;
	  -webkit-box-sizing: border-box; 
	  box-sizing: border-box; */
	}

	.checkbox {

		flex: 8;
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		/* 边框 */
		/* border: 1rpx solid #edf0f3;
	  -webkit-box-sizing: border-box; 
	  box-sizing: border-box; */
	}

	.yc-data-checkbox {
		margin: 5px;
		height: 150rpx;
		display: flex;
		flex-direction: row;
		text-align: center;


	}
</style>